<div class="card">
    <div class="card-header">
      进货通知抬头 (默认显示前后7天数据)
    </div>
    <div class="card-body">
      <!-- 搜索表单 -->
      <form (ngSubmit)="search()">
        <div class="row">
          <div class="col-md-3">
            <div class="form-group">
              <label>采购订单号</label>
              <input type="text" class="form-control" [(ngModel)]="filter.purchaseOrderNo" name="purchaseOrderNo">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>客户订单号</label>
              <input type="text" class="form-control" [(ngModel)]="filter.customerOrderNo" name="customerOrderNo">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>车号</label>
              <input type="text" class="form-control" [(ngModel)]="filter.carNo" name="carNo">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>司机</label>
              <input type="text" class="form-control" [(ngModel)]="filter.driverName" name="driverName">
            </div>
          </div>
        </div>
        <div class="row mt-2">
          <div class="col-md-3">
            <div class="form-group">
              <label>司机电话</label>
              <input type="text" class="form-control" [(ngModel)]="filter.driverPhone" name="driverPhone">
            </div>
          </div>
          <div class="col-md-3">
             <div class="form-group">
              <label>预计到货时间(起)</label>
              <input type="date" class="form-control" [(ngModel)]="filter.expectedArrivalDateFrom" name="expectedArrivalDateFrom">
            </div>
          </div>
           <div class="col-md-3">
             <div class="form-group">
              <label>预计到货时间(止)</label>
              <input type="date" class="form-control" [(ngModel)]="filter.expectedArrivalDateTo" name="expectedArrivalDateTo">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>单据状态</label>
              <select class="form-control" [(ngModel)]="filter.status" name="status">
                <option [ngValue]="undefined">全部</option>
                <option value="计划中">计划中</option>
                <option value="已完成">已完成</option>
              </select>
            </div>
          </div>
        </div>
        <div class="row mt-3">
          <div class="col-12 d-flex justify-content-between">
            <!-- 左侧按钮 -->
            <div>
              <button type="button" class="btn btn-primary mr-2" (click)="create()">
                <i class="fa fa-plus"></i> 录入
              </button>
              <button type="button" class="btn btn-success" (click)="viewDetails()" [disabled]="selected.length !== 1">
                <i class="fa fa-info-circle"></i> 查看
              </button>
            </div>
            <!-- 右侧按钮 -->
            <div>
              <button type="submit" class="btn btn-info mr-2">
                <i class="fa fa-search"></i> 查询
              </button>
              <button type="button" class="btn btn-secondary" (click)="reset()">
                <i class="fa fa-sync"></i> 重置
              </button>
            </div>
          </div>
        </div>
      </form>
      
      <hr>
  
      <!-- 数据表格 -->
      <ngx-datatable
        class="material"
        [rows]="goods"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [count]="totalCount"
        [externalPaging]="true"
        [externalSorting]="true"
        [limit]="pageSize"
        [offset]="pageNumber"
        (page)="onPage($event)"
        (sort)="onSort($event)"
        [selectionType]="'checkbox'"
        (select)="onSelect($event)"
        [selected]="selected"
      >
        <ngx-datatable-column
          [width]="50"
          [sortable]="false"
          [canAutoResize]="false"
          [draggable]="false"
          [resizeable]="false"
          [headerCheckboxable]="true"
          [checkboxable]="true"
        >
        </ngx-datatable-column>
        <ngx-datatable-column name="创建人名称" prop="creatorName"></ngx-datatable-column>
        <ngx-datatable-column name="创建日期" prop="creationTime">
          <ng-template let-value="value" ngx-datatable-cell-template>
            {{ value | date: 'yyyy-MM-dd' }}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="进货通知单号" prop="purchaseOrderNo"></ngx-datatable-column>
        <ngx-datatable-column name="供应商编码" prop="supplierCode"></ngx-datatable-column>
        <ngx-datatable-column name="预计到货时间" prop="estimatedArrivalTime">
          <ng-template let-value="value" ngx-datatable-cell-template>
            {{ value | date: 'yyyy-MM-dd HH:mm:ss' }}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="客户订单号" prop="customerOrderNo"></ngx-datatable-column>
        <ngx-datatable-column name="车号" prop="carNo"></ngx-datatable-column>
        <ngx-datatable-column name="司机" prop="driverName"></ngx-datatable-column>
        <ngx-datatable-column name="司机电话" prop="driverPhone"></ngx-datatable-column>
        <ngx-datatable-column name="备注" prop="remarks"></ngx-datatable-column>
        <ngx-datatable-column name="单据状态" prop="status"></ngx-datatable-column>
      </ngx-datatable>
    </div>
  </div>